<template>
    <div class="app-container">
        课程列表
        <!--查询表单-->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="courseQuery.title" placeholder="课程名称" />
            </el-form-item>

            <el-form-item label="课程分类">
                <el-select
                    v-model="courseQuery.subjectParentId"
                    @change="getTwoSubjectList"
                    placeholder="请选择一级分类"
                >
                    <el-option
                        v-for="item in subjectList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                    ></el-option>
                </el-select>
                <el-select v-model="courseQuery.subjectId" placeholder="请选择二级分类">
                    <el-option
                        v-for="item in twoSubjectList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <!-- 课程讲师 TODO -->
            <el-form-item label="课程讲师">
                <el-select v-model="courseQuery.teacherId" placeholder="请选择">
                    <el-option
                        v-for="item in teacherList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-button type="primary" icon="el-icon-search" @click="getCourseList()">查询</el-button>
            <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>

        <!-- 表格 -->
        <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="数据加载中"
            border
            fit
            highlight-current-row
        >
            <el-table-column label="序号" width="70" align="center">
                <template slot-scope="scope">{{ (page - 1) * limit + scope.$index + 1 }}</template>
            </el-table-column>

            <el-table-column label="课程信息" width="470" align="center">
                <template slot-scope="scope">
                    <div class="info">
                        <div class="pic">
                            <img :src="scope.row.cover" alt="scope.row.title" width="150px" />
                        </div>
                        <div class="title">
                            <a href>{{ scope.row.title }}</a>
                            <p>{{ scope.row.lessonNum }}课时</p>
                        </div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">{{ scope.row.gmtCreate.substr(0, 10) }}</template>
            </el-table-column>
            <el-table-column label="发布时间" align="center">
                <template slot-scope="scope">{{ scope.row.gmtModified.substr(0, 10) }}</template>
            </el-table-column>
            <el-table-column label="价格" width="100" align="center">
                <template slot-scope="scope">
                    {{ Number(scope.row.price) === 0 ? '免费' :
                    '¥' + scope.row.price.toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column prop="buyCount" label="付费学员" width="100" align="center">
                <template slot-scope="scope">{{ scope.row.buyCount }}人</template>
            </el-table-column>

            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <router-link :to="'/course/info/'+scope.row.id">
                        <el-button type="text" size="mini" icon="el-icon-edit">编辑课程信息</el-button>
                    </router-link>
                    <router-link :to="'/course/chapter/'+scope.row.id">
                        <el-button type="text" size="mini" icon="el-icon-edit">编辑课程大纲</el-button>
                    </router-link>
                    <el-button
                        type="text"
                        size="mini"
                        @click="deleteCourse(scope.row.id)"
                        icon="el-icon-delete"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            @size-change="changePageSize"
            @current-change="getCourseList"
            :current-page="page"
            :page-sizes="[2, 4, 8, 10]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script>
import * as course from "@/api/edu/course";

import * as subject from "@/api/edu/subject";

import * as teacher from "@/api/edu/teacher";

export default {
    data() {
        return {
            listLoading: true,
            list: null,
            page: 1,
            limit: 10,
            total: 0,
            courseQuery: {
                title: "",
                teacherId: "",
                subjectParentId: "",
                subjectId: ""
            },
            subjectList: "",
            twoSubjectList: "",
            teacherList: ""
        };
    },
    created() {
        this.init();
    },
    methods: {
        getCourseList(page = 1) {
            this.page = page;
            course
                .getCourseListByPage(this.page, this.limit, this.courseQuery)
                .then(response => {
                    console.log(response);
                    this.list = response.data.rows;
                    this.total = response.data.total;
                });
            this.listLoading = false;
        },
        removeDataById(id) {
            this.$confirm("确定删除该条记录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                teacher.deleteById(id).then(response => {
                    this.getCourseList();
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                });
            });
        },
        resetData() {
            this.courseQuery = {};
            this.getCourseList();
        },
        changePageSize(pageSize) {
            this.limit = pageSize;
            this.getCourseList();
        },
        init() {
            teacher.getTeacherAllList().then(response => {
                this.teacherList = response.data.items;
            });
            subject.getSubjectList().then(response => {
                this.subjectList = response.data.list;
                if (this.$route.params && this.$route.params.id) {
                    const id = this.$route.params.id;
                }
            }),
                this.getCourseList();
        },
        getTwoSubjectList() {
            this.courseQuery.subjectId = "";
            for (var i = 0; i < this.subjectList.length; i++) {
                if (
                    this.subjectList[i].id == this.courseQuery.subjectParentId
                ) {
                    this.twoSubjectList = this.subjectList[i].children;
                    break;
                }
            }
        },
        deleteCourse(id) {
            this.$confirm("确定删除该条记录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                course.deleteCourse(id).then(response => {
                    this.getCourseList();
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                });
            });
        }
    }
};
</script>

<style scoped>
.myClassList .info {
    width: 450px;
    overflow: hidden;
}
.myClassList .info .pic {
    width: 150px;
    height: 90px;
    overflow: hidden;
    float: left;
}
.myClassList .info .pic a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.myClassList .info .pic img {
    display: block;
    width: 100%;
}
.myClassList td .info .title {
    width: 280px;
    float: right;
    height: 90px;
}
.myClassList td .info .title a {
    display: block;
    height: 48px;
    line-height: 24px;
    overflow: hidden;
    color: #00baf2;
    margin-bottom: 12px;
}
.myClassList td .info .title p {
    line-height: 20px;
    margin-top: 5px;
    color: #818181;
}
</style>